<template>
  <!-- 组件根标签 -->
  <div class="mycommtent" v-if="item && item.author">
    <div class="content">
      <div class="pingluninfo">
        <div class="pingpic">
          <img :src="baseURL + item.author.avatar" alt="" @click="imgclick" />
        </div>
        <div class="info2">
          <div class="top">{{ item.author.nickname }}</div>
          <div class="bottom_time">{{ item.created_at | relativeTime }}</div>
        </div>
        <div class="star">
          <span>{{ item.star }}</span>
          <i class="iconfont iconbtn_dianzan_big_nor mystar"></i>
        </div>
      </div>
      <div class="commtent">
        {{ item.content }}
      </div>
      <div class="otherssay" v-if="item.children_comments.length !== 0">
        <div
          class="stu"
          v-for="(myitem, index) in item.children_comments"
          :key="index"
        >
          <span>{{ myitem.author }}</span
          >: {{ myitem.content }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['item'],
  name: '',
  data () {
    return {
      baseURL: process.env.VUE_APP_BaseURL
    }
  },
  methods: {
    imgclick () {
      this.$emit('imgclick', this.item)
    }
  },

  components: {}
}
</script>
<style lang="less" scoped>
.mycommtent {
  .content {
    word-break: break-all;
    word-wrap: break-word;
    .pingluninfo {
      display: flex;
      align-items: center;
      margin: 10px 0;
      .pingpic {
        img {
          width: 35px;
          height: 35px;
          border-radius: 50%;
        }
      }
      .info2 {
        margin-left: 10px;
        flex: 1;
        .top {
          height: 17px;
          opacity: 1;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Semibold;
          font-weight: 600;
          text-align: left;
          color: #545671;
          line-height: 17px;
          letter-spacing: 0px;
        }
        .bottom_time {
          height: 17px;
          opacity: 1;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #b4b4bd;
          line-height: 17px;
          letter-spacing: 0px;
        }
      }
      .star {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #c0c0c8;
        .mystar {
          font-size: 24px;
        }
      }
    }
    .commtent {
      font-size: 16px;
      padding-left: 60px;
      margin: 10px 0;
    }
    .otherssay {
      font-size: 14px;
      color: #9091a2;
      margin-left: 60px;
      padding: 10px;
      background-color: #f7f4f5;
      word-break: break-all;
      word-wrap: break-word;

      .stu {
        margin: 10px 0;
        span {
          color: #838496;
          float: left;
        }
      }
    }
  }
}
</style>
